<template>
  <div class="register">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="ruleForm">
      <el-form-item prop="phone">
        <el-input
          ref="phone"
          :readonly="readonly"
          @blur="onBlur"
          @focus="onFocus"
          v-model="ruleForm.phone"
          prefix-icon="el-icon-mobile-phone"
          placeholder='请输入手机号码'
          clearable
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="username">
        <el-input
          v-model="ruleForm.username"
          prefix-icon="el-icon-user"
          placeholder='请输入您的姓名'
          clearable
          autocomplete="off"
        >
          <p slot="suffix" class="icon">
            <span class="iconfont iconnan1" :class="{'active':sex===0}" @click="changeSex(0)"></span>
            <span class="iconfont iconnv" :class="{'active':sex===1}" @click="changeSex(1)"></span>
          </p>
        </el-input>
      </el-form-item>
      <el-form-item prop="agreement">
        <span>
          <el-checkbox v-model="ruleForm.agreement">我已阅读并同意</el-checkbox>
          <span class="user" @click="onChange(true)">《用户服务协议》</span>
        </span>
      </el-form-item>
      <el-form-item>
        <el-button class="submitBtn" type="primary" @click.prevent="submitForm('ruleForm')" size="small" :loading="loading">
          {{loading?"注册中":"注 册"}}
        </el-button>
      </el-form-item>
    </el-form>
    <Agreement :visible="visible" @onChange="onChange" @onConfirm="onConfirm"/>
  </div>
</template>

<script>
  import Agreement from './Agreement';
  import {register} from '../../utils/api';
  import {Success} from '../../utils/notification'

  export default {
    name: "Register",
    data() {
      const validatePhone = (rule, value, callback) => {
        const reg = /^1\d{10}$/;
        if (value === '') {
          callback(new Error('请输入手机号码'));
        }
        else if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号码'));
        }
        else {
          callback()
        }
      };
      const validateAgreement = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请阅读用户服务协议并确认勾选'));
        }
        else {
          callback()
        }
      };
      return {
        readonly: true,
        loading: false,
        visible: false,
        ruleForm: {
          phone: '',
          username: '',
          agreement: false
        },
        rules: {
          phone: [
            {validator: validatePhone, trigger: 'change'}
          ],
          username: [
            {required: true, message: '请输入您的姓名', trigger: 'change'}
          ],
          agreement: [
            {validator: validateAgreement, trigger: 'change'}
          ],
        },
        sex: 0,
      }
    },
    components: {
      Agreement
    },
    methods: {
      onFocus() {
        this.readonly = false;
      },
      onBlur() {
        this.readonly = true;
      },
      //提交
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            const params = {
              phone: this.ruleForm.phone,
              petName: this.ruleForm.username,
              sex: this.sex
            };
            this.loading = true;
            this.postRequest(register, params)
              .then(res => {
                this.loading = false;
                if (res.code === 200) {
                  Success(res.msg);
                  this.$emit('changeLogin');
                }
              })
              .catch(err => {
                this.loading = false;
              });
          }
          else {
            return false;
          }
        });
      },
      //切换性别
      changeSex(num) {
        this.sex = num;
      },
      //服务协议
      onChange(val) {
        this.visible = val;
      },
      onConfirm() {
        this.visible = false;
        this.ruleForm.agreement = true;
      },
    }
  }
</script>

<style scoped>
  @import "../../assets/style/login.css";

  .icon {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .icon > span {
    padding: 8px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    margin-right: 10px;
  }

  .icon > span:first-of-type {
    color: #409EFF;
  }

  .icon > span:last-of-type {
    color: #FF3366;
  }

  .active {
    background-color: #303031;
  }

  .user {
    color: #409EFF;
    cursor: pointer;
  }
</style>
